<template>
  <div class="login-container">
    <div class="login-left">
      <img src="../../assets/img/loginImg.png" alt="login" width="100%" height="100%">
    </div>
    <router-view/>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss">
  $pink: #Faa39e;
  $light_orange: rgba(254,241,240,1);
  $red:rgba(244,41,53,1);
/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 42px;
    width: 90%;
    input {
      border: 0;
      -webkit-appearance: none;
      padding: 12px 5px 12px 15px;
      height: 40px;
      font-size:16px;
      font-weight:400;
      color:rgba(153,153,153,1) !important;
      line-height:22px;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
        color:rgba(153,153,153,1) !important;
      }
    }
  }
  .el-form-item {
    height:42px;
    width: 320px;
    background:rgba(253,253,253,1);
    border-radius:2px;
    border:1px solid rgba(233,233,233,1);
  }
}
/*end*/
.login-container {
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
  margin-top: -322px;
  margin-left: -536px;
  width:1072px;
  height:644px;
  background:rgba(255,255,255,1);
  box-shadow: 0 0 54px 0 rgba(0,0,0,0.06);
  .login-left {
    width: 602px;
    height: 644px;
  }
  .login-right {
    width: 470px;
    height: 644px;
  }
  .register {
    display: flex;
    justify-content: space-between;
    padding: 40px 24px;
    a {
      font-size:16px;
      font-weight:400;
      color:rgba(102,102,102,1);
    };
  }
  .login-form {
    padding: 0 76px 32px 74px;
  }
  .title {
    font-size:24px;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height:33px;
    margin-bottom: 15px;
  }
  .prompt {
    width:282px;
    font-size:16px;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:22px;
    margin-bottom: 44px;
  }
}
</style>
